Actualmente estoy tratando de crear una función que reproduzca archivos de audio al ingresar con el mouse. Cuando entro en un área específica, debería reproducir los sonidos, pero encuentro que tarda casi un minuto en cargarse cuando uso el detector de eventos de mouseover. Cuando uso un evento de clic, funciona al instante. Tenía curiosidad sobre por qué este es el caso.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--CSS Main Stylesheet--> <link rel="stylesheet" href="css/main.css" /> <title>Guitar App</title> </head> <body> <div> <audio id="lowE" src="sounds/lowE.wav"></audio> <audio id="A" src="sounds/A.wav"></audio> <audio id="D" src="sounds/D.wav"></audio> <audio id="G" src="sounds/G.wav"></audio> <audio id="B" src="sounds/B.ogg"></audio> <audio id="highE" type="audio/ogg" src="sounds/highE.wav"></audio> </div> <div class="container"></div> <!--Main Script--> <script src="scripts/app.js"></script> </body> </html> $primary-color: #aa1e23; body { font-size: 62.5%; margin: 0; .container { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 99.7%; height: 100vh; border: 2px solid $primary-color; .box { display: flex; justify-content: center; align-items: center; color: #fff; font-size: 2rem; width: 100px; height: 100px; background-color: $primary-color; } .box:hover { transform: scale(105%); } } } const stringSounds = ["lowE", "A", "D", "G", "B", "highE"]; stringSounds.forEach((stringSound) => { const div = document.createElement("div"); div.classList.add("box"); div.innerText = stringSound; div.addEventListener("mouseover", () => { document.querySelector(`#${stringSound}`).play(); }); document.querySelector(".container").appendChild(div); });